<template>
    <div class="box">
        <van-divider>最佳助攻</van-divider>
        <div class="cont" v-if="user.length >= 3">
            <div class="top" v-show="item.users.length > 3" >
                <div :class="index===1?'img1':'img2'" v-for="(item1,index) in user" :key="index">
                    <div class="img">
                        <img :src="item1.avatar" alt="" @click="gotoUse(item1.uid)">
                        <div class="text">{{index===0?2:index===2?3:index===1?1:''}}</div>
                    </div>
                    <div class="name">{{item1.name}}</div>
                    <div class="num">{{item1.fans | forNumber}}&nbsp;{{mount}}</div>
                </div>
            </div>
            <div v-if="item.users">
                <div class="bottom" v-if="item.users.length > 3">
                <div v-for="(v,index) in item.users" :key="index">
                    <ctitle v-if="index>2" :item="v" :index="index" :mount="mount"/>
                </div>
                
            </div>
            </div>
            
        </div>
        <div v-else>
            暂无排行
        </div>
    </div>
</template>

<script>
    import ctitle from '@/components/YueTitle.vue'
    export default {
        components:{
            ctitle
        },
        props:{
            item:{
                type:Object,
                default:{}
            },
            user:{
                type:Array,
                default:[]
            },
            mount:{
                type:String,
                default:''
            },
            piao:{
                type:String,
                default:''
            }
        },
        data(){
            return{
            }
        },
        created(){
        },
        methods:{
            gotoUse(item){
                // 
                this.$router.push({name:"CartoonUser",query:{id:item}})
            }
        }
    }
</script>

<style lang="less" scoped>
    .van-divider{
        color: #684c31;
        border-color:#684c31;
    }
    .cont{
        color: #684c31;
        .top{
            width: 100%;
            display: flex;
            align-items: flex-end;
            .img2{
                flex: 1;
                .img{
                    position: relative;
                    overflow: hidden;
                    // margin-top: 50px;
                    .text{
                        font-size: 50px;
                        font-weight: bolder;
                        text-align: center;
                    }
                    img{
                        width: 40%;
                        border-radius: 50%;
                        position: absolute;
                        left: 60px;
                        top: 2px;
                    }
                }
                .name{
                    max-width:60px;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    overflow: hidden;
                    margin: 0 auto;
                    text-align: center;
                }
                .num{
                    text-align: center;
                }
            }
            .img1{
                flex: 1;
                .img{
                    position: relative;
                    // margin-top: 50px;
                    overflow: hidden;
                    .text{
                        font-size: 70px;
                        font-weight: bolder;
                        text-align: center;
                    }
                    img{
                        width: 50%;
                        border-radius: 50%;
                        position: absolute;
                        left: 60px;
                        top:6px;
                    }
                }
                .name{
                    max-width: 60px;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    overflow: hidden;
                    margin: 0 auto;
                    text-align: center;
                }
                .num{
                    text-align: center;
                }
            }
        }
    }
</style>